<template>
  <div class="commonList" :style="willHidden?'overflow: hidden;' : 'overflow: visible;' ">
    <div v-if="showList">
      <slot name="appendCondition"></slot>
      <el-table
        v-loading="loading"
        height="760"
        tooltip-effect="dark"
        ref="tableData"
        :show-header="!hideHeader"
        @select-all="selectAll"
        @select="select"
        border stripe header-cell-class-name="table-head-cell" cell-class-name="table-head-cell" :row-key="rowKey"
        default-expand-all highlight-current-row
        @row-click="rowClick"
        @row-dblclick="dbClick"
        fit
        :data="data" :tree-props="{children: 'children'}">
        <el-table-column
          v-if="columns.length>0 && showSelect"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column v-for="(item,index) of columns"
                         v-if="!item.searchOnly"
                         :key="index"
                         :prop="item.prop"
                         :label="item.label"
                         :fixed="item.fixed?item.fixed:false"
                         :min-width="getMaxLength(data, item.prop) < (item.label.length * 13 + 20)?(item.label.length * 13 + 20):getMaxLength(data, item.prop)">
          <template slot-scope="scope">
            <template v-if="item.prop!='operate'">
              <div v-if="item.customSet" v-html="item.customSet(scope.row[item.prop])"></div>
              <div v-else style="display: contents">{{scope.row[item.prop]}}</div>
            </template>
            <template v-else>
              <el-button
                v-for="(operate, idx) of item.operates"
                :key="idx"
                size="mini"
                type="danger"
                @click="operate.action(scope.row)">{{operate.title}}</el-button>
            </template>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination
        style="overflow: visible"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="pageSize"
        :pager-count="5"
        layout="total, prev, pager, next, jumper , sizes"
        v-if="showPage"
        :small="true"
        :total="total">
      </el-pagination>
    </div>


<!--    <edit-pop-up  v-if="add" :props="add" :visible="addVisible" @addVisibleChange="addVisibleChange"></edit-pop-up>-->
  </div>
</template>

<script>
  import http from '../../api/http'
  import EditPopUp from "./EditPopUp";
  export default {
      props:{
          columns:Array,
          pageChange:Function,
          selectChange: Array,
          listUrl:String,
          labelName:String,
          conditions:Array,
          rowKey:String,
          hideHeader:Boolean,
          showSelect: Boolean,
          status:Number
      },
      data() {
          return{
              row: null,
              loading: false,
              data:[],
              addVisible:false,
              showList:true,
              pageNum: 1,
              pageSize: 15,
              total:1,
              showPage:true,
              willHidden: true,
          }
      },
      watch: {
        listUrl(newValue, oldValue) {
          this.search()
        },
        conditions(newValue, oldValue) {
          this.search()
        }
      },
      methods:{
          handleSizeChange(size) {
            this.pageSize = size
            this.getList()
          },
          handleCurrentChange(page) {
            this.pageNum = page
            this.getList()
          },
          search() {
              this.pageNum = 1;
              this.getList()
          },
          getList() {
              let params = {pageSize: this.pageSize,pageNum: this.pageNum}
              if (this.conditions) {
                  for (let i=0;i<this.conditions.length;i++) {
                    if (this.conditions[i].checked) {
                      // if(this.conditions[i].prop === 'isSfa'){
                      //   this.conditions[i].value = (this.conditions[i].value=='是')?1:0
                      // }
                        let prop = this.conditions[i].queryProp?this.conditions[i].queryProp:this.conditions[i].prop
                        params[prop] = this.conditions[i].value
                    }
                  }
              }
              params.status = this.status
              this.loading = true
              http.get(this.listUrl,params).then(resp=>{
                  if (resp instanceof Array) {
                      this.data = resp
                      this.showPage = false
                  } else {
                      this.data = resp.list
                      this.total = resp.total
                      this.showPage = true
                  }
                  for (let column of this.columns) {
                    if (column.transfer) {
                      for (let item of this.data) {
                        item[column.prop] = column.transfer(item[column.prop])
                      }
                    }
                  }
                  for (let i in this.data) {
                    if (this.data[i].inDate) this.data[i].inDate = this.data[i].inDate.slice(0, 10)
                  }
                  this.loading = false
              },msg=>{this.loading = false})
          },
          handleClick(btn) {
              if (btn == this.$config.BTNS.ADD) {
                  if (this.add ) {
                      if (this.add.type == 'dialog') {
                          this.addVisible = true
                      } else {
                          this.showList = false
                      }

                  }
              }
          },
          addVisibleChange(show) {
              this.addVisible = show
          },
          dbClick(row, column, event) {
            // this.$refs.tableData.toggleRowSelection(row)
            // this.$emit("tableSelect",row)
            // this.$emit("dbClick", row)
          },
          rowClick(row, column, event) {
            this.$refs.tableData.toggleRowSelection(row)
            this.$emit("tableSelect",row)
          },
          select(selection, row){
            this.$emit("tableSelect",row)
          },
          selectAll(selection) {
            this.$emit("selectAll", selection, this.data)
          },
          getMaxLength(arr, key) {
          return arr.reduce((acc, item) => {
            if (item[key]) {
              const str = item[key].toString()
              const upLetter = str.match(/[A-Z]/g)
              const upLetterLen = upLetter ? upLetter.length : 0
              const lowLetter = str.match(/[a-z]/g)
              const lowLetterLen = lowLetter ? lowLetter.length : 0
              const char = str.match(/[\u4e00-\u9fa5]/g)
              const charLen = char ? char.length: 0
              const num = str.match(/\d|\./g)
              const numLen = num ? num.length : 0
              const otherLen = str.length - upLetterLen - lowLetterLen - charLen - numLen
              let calcLen = charLen * 1.0 + upLetterLen * 0.6 + numLen * 0.55 + lowLetterLen * 0.48 + otherLen * 0.35
              if (acc < calcLen) {
                acc = calcLen
              }
            }
            return acc
          }, 0) * 13 + 20
        },
      },
      created() {
        this.willHidden = false
          if (this.listUrl) {
              this.getList()
          }
      },
      updated() {
        if (this.selectChange && this.selectChange.length > 0) {
          for (var k = 0; k < this.data.length; k++) {
            for (var i = 0; i < this.selectChange.length; i++) {
              if (this.data[k].pkid == this.selectChange[i].pkid) {
                this.$refs.tableData.toggleRowSelection(this.data[k])
                break;
              }
            }
          }
        }
      },
      beforeDestroy() {
        this.willHidden = true
      },
      components:{EditPopUp}
  }
</script>

<style lang="less" scoped>
  .commonList {
    min-width: 100%;
    width: fit-content;
  }
  .main-label{
    border: #ccc 1px solid;
    border-bottom: 0;
    background-image: url(../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    height: 27px;
    line-height: 27px;
    font-weight: bold;
    padding-left: 5px;
  }
  .main-btn-container{
    border: #ccc 1px solid;
    border-top: 0;
    margin-bottom: 1px;
    padding-top: 2px;
    overflow: auto;
    scrollbar-face-color: #e4e4e4;
    scrollbar-heightlight-color: #f0f0f0;
    scrollbar-3dlight-color: #d6d6d6;
    scrollbar-arrow-color: #240024;
    scrollbar-darkshadow-color: #d6d6d6;
    background: #F7F7F7;
    height: 36px;
    line-height: 35px;
  }

  /deep/.table-head-cell{
    padding: 5px 0 !important;
    color: #000000 !important;
    font-size: 12px !important;
    background: #F5F5F6;
    white-space: nowrap;
    word-break: keep-all;
    width: fit-content;
    overflow: visible;
    text-overflow: clip;
  }

  /deep/.table-head-cell div {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    word-break: keep-all;
    width: fit-content;
  }

  .el-button{
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    vertical-align: center;
    font: 8px/8px HelveticaNeue, Arial;
    padding: 0px 11px;
    border: 1px solid #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9pt;
    margin-left: 2px;
    line-height: 25px;
    color: #000;
    outline: none;
    background-image: url(../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    &:hover {
      color: #FFF;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc');
      border: 1px solid #d51900;
      background: linear-gradient(top, #d51900, #d51900);
      background: -moz-linear-gradient(top, #d51900, #d51900);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d51900), to(#d51900));
      text-shadow: -1px -1px 1px #1c6a9e;
    }
    /deep/span{
      display: block;
    }
  }
  /deep/.el-table .el-table__row {
    cursor: pointer;
  }
  .el-table {
    overflow-y: visible;
  }
  .el-table /deep/ .el-table__header th .el-checkbox {
    // visibility: hidden! important;
  }

  /deep/.el-table--scrollable-x .el-table__body-wrapper {
    overflow: visible;
  }
  /deep/.el-table__body tr.current-row>td{
    background-color: #d0e5f6;
  }
  /deep/.el-table--striped .el-table__body tr.el-table__row--striped.current-row td{
    background-color: #d0e5f6;
  }
  /deep/.el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color:#d0e5f6
  }
</style>
